<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 表格高亮 -->
			<style type="text/css">
					
					tr td,tr th{
						
						width: 200px;
						line-height: 30px;
						text-align: center;
					}
				
				
			</style>
<!--css-->
		<!-- 表格 -->
		<style type="text/css">
			table tr th {
				background: #f7f7f7;
			}

			table,
			table tr th,
			table tr td {
				border: 1px solid #eaeaea;
			}

			table {
				min-width: 200px;
				min-height: 25px;
				line-height: 25px;
				text-align: center;
				border-collapse: collapse;
			}
		
		</style>
		
		
	</head>
	<body>
		<div id="app">
			<div v-if="books.length">
				<table>
					<thead>
						<tr>
							<th><input type="checkbox" @click="checkAll" v-model="checkall"></th>
							<th>ID</th>
							<th>书籍名称</th>
							<th>出版日期</th>
							<th>价格</th>
							<th>购买数量</th>
							<th>操作</th>
						</tr>

					</thead>

					<tbody id="body">
						<tr v-for="(item,index) in books" :key="item.id" v-on:click="select(index)">
							<!-- <td><input type="checkbox" :checked="item.isChecked"></td> -->
							<!-- <td><input type="checkbox" v-model="checked" :value="item.id"></td> -->
							<td><input type="checkbox" :checked="item.isChecked" :value="item.id"></td>
							<td>{{item.id}}</td>
							<td>{{item.name}}</td>
							<td>{{item.tdate}}</td>
							<td>{{item.price | formatPrice}}</td>
							<td>
								<button-reduce :list="item" :index="index" :checked="item.isChecked"></button-reduce>
								{{item.count}}
								<button-add :list="item"></button-add></td>
							<td><button-remove :index="index"></button-remove></td>
						</tr>
					</tbody>
				</table>
				<h3>总价：{{total | formatPrice}}</h3>
			</div>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let app = new Vue({
				el: '#app',
				data: {
					books: [{
							isChecked: false,
							id: 1,
							tdate: '2020-10',
							price: 100,
							count: 2,
							name: '《Java从入门到放弃》',
						},
						{
							isChecked: false,
							id: 2,
							tdate: '2010-10',
							price: 90.01,
							count: 1,
							name: '《PHP从入门到放弃》',
						},
						{
							isChecked: false,
							id: 3,
							tdate: '2012-10',
							price: 80,
							count: 1,
							name: '《Python从入门到放弃》',
						},
						{
							isChecked: false,
							id: 4,
							tdate: '2013-10',
							price: 70,
							count: 1,
							name: '《什么都是从入门到放弃》',
						}

					],
					checkall: false,
					checked: []
				},
				computed: {
					/* total: function() {
						var total = 0;
						for (var i in this.books) {
							total += this.books[i].price * this.books[i].count;
						}
						return total;
					} */
					total: function() {
						return this.books.reduce((returnVal, nextItem) => returnVal + nextItem.price * nextItem.count, 0);
					},
					/* formatPrice: function(){
						// return function(price){
						// console.log(price);
						// return '￥'+ price.toFixed(2);
						return price => '￥'+ price.toFixed(2);
						} */
				},
				components:{
					'button-remove':{
						props: ['index'],
						template: `
						<button type="button" @click="remove(index)">移除</button>
						`,
						methods: {
							remove: function(index) {
								this.books.splice(index, 1);
							}
						
						}
					},
					'button-reduce': {
						props: ['list','index'],
						template: `
						<button type="button" @click="mouse(list)" :disabled="list.count < 1">-</button>
						`,
						methods: {
							mouse: (item) => item.count--,
						},
					},
					'button-add': {
						props: ['list'],
						template: `
						<button type="button" v-on:click="add(list)">+</button>
						`,
						methods: {
							add: function(item) {
								item.count++;
							}
						}
					}
				},
				methods: {
					checkAll: function() {
						var _this = this
						if (this.checkall) {
							//实现反选
							this.checked = []
						} else {
							//实现全选
							this.checked = []
							this.books.forEach(function(item) {
								_this.checked.push(item.id)
							})
						}
						if (this.checked.length === this.books.length) {
							this.checkall = true
						}
					},
					select: function(index) {
						console.log("index:"+index);
						if(this.books[index]!=null){
							if(this.books[index].isChecked)
							return this.books[index].isChecked=false;
							return this.books[index].isChecked=true;
						}
						
					}
				},
				filters: {
					formatPrice: price => '￥' + price.toFixed(2)
				}
			});
		</script>
		<!-- 高亮js -->
		<script type="text/javascript">
				var tbody = document.getElementById('body');		//tbody节点
				for(var i = 0; i < tbody.children.length; i++) {
						tbody.children[i].style.backgroundColor = '#ffffff';
					//实现鼠标移入高亮
					tbody.children[i].onmouseenter = function () {
						this.style.backgroundColor = '#f7f7f7';
						
					}
						tbody.children[i].onmouseleave = function () {
						this.style.backgroundColor = '#ffffff';
				}
				}
			</script>
	</body>
</html>
